<template>
	<view class="contract">
		<!-- 自定义导航栏 -->
		<view :style="{ 'height': navBarHeight + 'px' }" class="custom-nav-bar">
			<view class="nav-back" @click="goBack"><u-icon name="arrow-left" color="#303133" size="24"></u-icon></view>
			<view class="nav-title">详情内容</view>
		</view>
		<!-- 页面主体内容 -->
		<view class="page-content" :style="{ 'padding-top': navBarHeight + 'px' }">
			<!-- 这里可以添加页面的具体内容 -->
			<view class="contract-top">
				<view class="userAnswer">
					<!-- 用户头像 -->
					<view class="user-avatar">
						<image src="https://www.zxsl.zxmap.cn/zxch-app/2025/07/01/73ba803b2542486dbb56e247c09498a4.png" mode="aspectFit"></image>
					</view>
					<view class="reViewImg">
						<image @click="reViewImg" :src="askImglist[0]"></image>
					</view>
				</view>
				
				<view class="userAnswer">
					<view class="userAskInfo" style="width: 70%;">
						<zero-markdown-view :markdown="isAlreadyInfo.taskContent"></zero-markdown-view>
					</view>
				</view>
				<!-- <uni-easyinput :autoHeight="true" :maxlength="7000" type="textarea" v-model="value3" placeholder="" /> -->
			</view>
		</view>
	</view>
	
	<up-popup :show="showImage" mode="center"  @close="showImage = false" @open="showImage = true">
		<view class="swiperBox">
			<up-swiper
			        :list="askImglist"
					:autoplay="false"
					height="500"
					:current="current"
			></up-swiper>
		</view>
	
	</up-popup>
</template>

<script setup>
	import { ref, onMounted, reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app' // 新增引入
	import { listChatConfigInfo, listChatConfigImageInfo } from '@/api/index.js'

	// 自定义导航栏的高度
	const navBarHeight = ref(0);
	const isAlreadyInfo = ref([])
	const isASkInfo = ref()
	const imglist = ref([])
	const askImglist = ref([])
	const showImage = ref(false)
	const current = ref(0)
	
	// 返回上一页的方法
	const goBack = () => {
		uni.navigateBack();
	};

	const showDetail = async (taskId) => {
		const res = await listChatConfigInfo(taskId)
		if(res.data.code === 200) {
			isAlreadyInfo.value = res.data.data
			const resImg = await listChatConfigImageInfo(taskId)
			if(resImg.data.code == 200) {
				imglist.value = []
				askImglist.value = []
				resImg.data.rows.forEach(item => {
					imglist.value.push(item.sourceUrl)
					item.imagePath?askImglist.value.push(item.imagePath):askImglist.value.push(item.sourceUrl)
				})
			}
		}
	}
	
	const reViewImg = () => {
		showImage.value = true
		current.value = 0
	}
	
	onLoad((options) => {
		// 从路由参数获取 taskId
		if (options.taskId) {
			showDetail(options.taskId)
		}
	})

	onMounted(async () => {
		try {
			const res = await uni.getSystemInfo();
			// 获取状态栏高度（刘海高度）
			const statusBarHeight = res.statusBarHeight;
			// 标准导航栏高度，一般为 44px（iOS）或 48px（Android）
			const defaultNavBarHeight = res.platform === 'ios' ? 44 : 48;
			// 计算自定义导航栏的高度
			navBarHeight.value = statusBarHeight + defaultNavBarHeight;
		} catch (error) {
			console.error('获取设备信息失败:', error);
		}
	});
</script>

<style scoped>
	.contract {
		background-color: #f0f4f9;
		display: flex;
		flex-direction: column;
		background-color: #fff;
	}

	.custom-nav-bar {
		position: fixed;
		top: 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F2F3F5;
		z-index: 99;
	}

	.nav-title {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		position: absolute;
		bottom: 20rpx;
	}

	.nav-back {
		font-weight: bold;
		position: absolute;
		bottom: 20rpx;
		left: 20rpx
	}
	.page-content {
	    flex: 1;
	}
	.userAsk {
		display: flex;
		justify-content: flex-end;
		margin: 10rpx;
	}
	.userAnswer {
		display: flex;
		justify-content: flex-start;
		margin: 10rpx;
	}
	.reViewImg image{
		width: 320rpx;
	}
	.userAskInfo {
		padding: 10rpx;
		box-sizing: border-box;
		border: 1px solid #CDD0D6;
		border-radius: 10rpx;
		flex-grow: 1;
	}
	.userAnswer .user-avatar{
		margin-left: 0;
		margin-right: 10rpx;
		flex-grow: 0;
		flex-shrink: 0;
	}
	.userAskInfo image {
		max-width:100%;
	}
	.user-avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-left: 10rpx;
		flex-grow: 0;
		flex-shrink: 0;
	}
	
	.user-avatar image {
		width: 100%;
		height: 100%;
	}
	.swiperBox {
		position: fixed;
		top: 50%;
		left: 0;
		width: 100vw;
		transform: translateY(-50%);
	}
</style>